﻿<header>
    <h2>My Quotes > Create New Quote</h2>
</header>
<div class="searchcontractsform center">
    <div id="searchByCustomerArea" class="row">
        <form class="form-horizontal" role="form" name="searchcontractsform">
            <fieldset>
                <legend>Search Contracts</legend>
                <div class="col-lg-4 col-md-3 col-sm-3 form-inline">
                    <div class="form-group searchbyarea">
                        <label for="searchby">Search By</label>
                        <select class="form-control" name="searchby" id="searchby"
                                ng-options="option.appName for option in contracts.searchByApp.options track by option.id"
                                ng-model="contracts.searchByApp.selectedOption"></select>
                    </div>
                    <div id="searchbydescription" class="alert alert-info" ng-hide="contracts.searchByApp.selectedOption.id=='2'">The search according to SFDC account is being done in the MA level (TPA, Country)</div>
                </div>
                <div class="col-lg-7 col-md-8 col-sm-8">
                    <div id="SFDCSearchArea" ng-hide="contracts.searchByApp.selectedOption.id=='2'">
                        <div class="form-group">
                            <label class="control-label col-md-3" for="sfdcAccount">SFDC Account Name</label>
                            <div class="col-md-9">
                                <input type="text" ng-model="contracts.selectedAccount"
                                       placeholder="Type account name"
                                       uib-typeahead="option as option.AccountName for option in contracts.getAccounts($viewValue) | limitTo:10"
                                       typeahead-loading="loadingAccounts"
                                       typeahead-no-results="noResults"
                                       class="form-control">
                                <i ng-show="loadingAccounts" class="glyphicon glyphicon-refresh"></i>
                                <div ng-show="noResults">
                                    <i class="glyphicon glyphicon-remove"></i> No Results Found
                                </div>
                                <!--<input id="sfdcAccount" type="text" class="form-control" ng-model="contracts.selectedAccount.AccountName" ng-keyup="contracts.searchAccounts(contracts.selectedAccount.AccountName)"
                                       ng-required="contracts.searchByApp.selectedOption.id=='1'"
                                       placeholder="Type account name" autocomplete="off" />
                                <div id="sfdcAccountOptions" class="autocomplete panel panel-info" ng-show="contracts.autoCompleteAccountsColl.length>0">
                                    <ul>
                                        <li ng-repeat="itm in contracts.autoCompleteAccountsColl | limitTo:35" ng-click="contracts.setSelected(itm)">
                                            <span>{{itm.AccountName}}({{itm.AccountID}})</span>
                                        </li>
                                    </ul>
                                </div>-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="masterAccount">Master Account Name </label>
                            <div class="col-sm-9">
                                <input type="text" id="masterAccount" class="form-control" ng-model="contracts.selectedAccount.MasterAccountName" ng-disabled="true" />
                            </div>
                        </div>
                    </div>
                    <div id="OracleSearchArea" ng-hide="contracts.searchByApp.selectedOption.id=='1'">
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="oracleCustomer">Oracle Customer</label>
                            <div class="col-sm-9">
                                <input type="text" ng-model="contracts.selectedCustomer"
                                       placeholder="Type account name"
                                       uib-typeahead="option as option.CustomerName for option in contracts.getCustomers($viewValue) | limitTo:10"
                                       typeahead-loading="loadingCustomers"
                                       typeahead-no-results="noCustomers"
                                       class="form-control">
                                <i ng-show="loadingCustomers" class="glyphicon glyphicon-refresh"></i>
                                <div ng-show="noCustomers">
                                    <i class="glyphicon glyphicon-remove"></i> No Results Found
                                </div>
                                <!--<input id="oracleCustomer" type="text" class="form-control" ng-model="contracts.selectedCustomer.CustomerName" ng-keyup="contracts.searchCustomers(contracts.selectedCustomer.CustomerName)"
                                       ng-required="contracts.searchByApp.selectedOption.id=='2'"
                                       placeholder="Type customer name" autocomplete="off" />
                                <div id="oracleCustomerOptions" class="autocomplete">
                                    <ul class="unstyled">
                                        <li ng-repeat="itm in contracts.autoCompleteCustomersColl | limitTo:35">
                                            <a href="" ng-click="contracts.setSelected(itm)"><span>{{itm.CustomerName}}({{itm.CustomerID}})</span></a>
                                        </li>
                                    </ul>
                                </div>-->
                            </div>
                        </div>
                    </div>
                    <div id="commonSearchArea">
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="topDivisionSelect">Top Division</label>
                            <div class="col-sm-9">
                                <select name="topDivisionSelect" id="topDivisionSelect" class="form-control"
                                        ng-options="option.TopDivisionName for option in contracts.topDivisions track by option.TopDivisionID"
                                        ng-model="contracts.topDivisions.selectedOption" required>
                                    <option value="">-- Select top division --</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="topRegionSelect">Top Region</label>
                            <div class="col-sm-9">
                                <select name="topRegionSelect" id="topRegionSelect" class="form-control"
                                        ng-options="option.TopRegionName for option in contracts.topRegions track by option.TopRegionCode"
                                        ng-model="contracts.topRegions.selectedOption">
                                    <option value="">All</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="customerRelationSelect">Customer Relation</label>
                            <div id="customerRelationSelect" class="col-sm-9">
                                <label class="checkbox-inline" ng-repeat="itm in contracts.searchFilters">
                                    <input type="checkbox" name="searchFilter" ng-model="itm.checked" ng-change="contracts.customerRelationChange(itm.FilterValue, itm.checked)" />{{itm.FilterName}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="expPeriodSelect">Expiration Period</label>
                            <div class="col-sm-9">
                                <select id="expPeriodSelect" class="form-control"
                                        ng-options="option.name for option in contracts.expirationPeriod.options track by option.id"
                                        ng-model="contracts.expirationPeriod.selectedOption"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="inclWarranty"></label>
                            <div class="col-sm-9">
                                <label class="checkbox-inline"><input type="checkbox" name="inclWarranty" ng-model="contracts.includeWarranty.checked" />{{contracts.includeWarranty.FilterName}}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1 col-sm-1 col-md-1 pull-down">
                    <button type="submit" ng-click="contracts.searchContracts(searchcontractsform)" class="btn btn-add">
                        <i class="glyphicon glyphicon-plus"></i>
                        Add
                    </button>
                    <button type="button" ng-click="contracts.fieldsReset()" class="btn btn-clear btn-add">
                        <i class="glyphicon glyphicon-remove"></i>
                        Clear Fields
                    </button>
                </div>

            </fieldset>
        </form>
    </div>
    <div class="row" id="additionalContactsArea">
        <form class="form-inline" role="form" name="additionacontractsform">
            <fieldset>
                <legend>Add Additional Contract By</legend>
                <div class="col-lg-11">
                    <div class="control-group" id="addContracts">
                        <div class="radio-inline" ng-repeat="itm in contracts.addContracts.options">
                            <label>
                                <input type="radio" ng-model="contracts.addContracts.selectedOption" value="{{itm.value}}">
                                {{itm.name}}
                            </label>
                        </div>
                        <input id="addContractsSearchText" type="text" ng-model="contracts.addContracts.searchText" class="form-control" required autocomplete="off" />
                    </div>
                </div>
                <div class="col-lg-1">
                    <button type="submit" ng-click="contracts.searchAdditionalContracts(additionacontractsform)" class="btn btn-add">
                        <i class="glyphicon glyphicon-plus">
                        </i> Add
                    </button>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="row" id="searchResultsArea" ng-show="contracts.contractsCollection.length>0">
        <div class="row">
            <!-- Nav tabs -->
            <div class="col-lg-4 navColumn">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" ng-class="{'active':contracts.currentTab==1}"><a href="" ng-click="contracts.currentTab=1" aria-controls="home" role="tab" data-toggle="tab">Main Info</a></li>
                    <li role="presentation" ng-class="{'active':contracts.currentTab==2}"><a href="" ng-click="contracts.currentTab=2" aria-controls="profile" role="tab" data-toggle="tab">Additional Info</a></li>
                </ul>
            </div>
            <div class="col-lg-8">
                <select id="pagingValSelect" class="form-control"
                        ng-options="option.name for option in contracts.pagingVal.options track by option.id"
                        ng-model="contracts.pagingVal.selectedOption" ng-change="contracts.changeNumberOfItemsInPage(contracts.pagingVal.selectedOption.id)"></select>

                <!-- Remove Selected Rows Button -->
                <button type="button" ng-click="contracts.removeSelectedRows()" class="btn btn-sm btn-info removeRow">
                    <i class="glyphicon glyphicon-minus">
                    </i> Remove Selected items
                </button>
                <!-- Mark as Lead contract button -->
                <!--<button type="button" ng-click="contracts.removeSelectedRows()" class="btn btn-sm btn-info removeRow">
                    <i class="glyphicon glyphicon-star">
                    </i> Mark as Lead Contract
                </button>-->
            </div>
        </div>
        <!--<ul class="tableTabs">

            <li id="tab1" ng-click="contracts.showTab(1)" class="active"><a href="">Main Info</a></li>
            <li id="tab2" ng-click="contracts.showTab(2)"><a href="">Tab 2</a></li>
        </ul>-->
        <div class="row">
            <!-- Contracts Collection Table -->
            <table st-table="contracts.displayContractsCollection" st-safe-src="contracts.contractsCollection" class="table contractstable">
                <thead>
                    <tr>
                        <th class="select-column">
                            <input type="checkbox" ng-change="contracts.selectAll(row.isSelected)" ng-model="row.isSelected" />
                        </th>
                        <th st-sort="CONTRACT_NUMBER" class="static-column">Contract Number</th>
                        <th st-sort="SOLD_TO" ng-show="contracts.currentTab==1">Sold To Customer</th>
                        <th st-sort="INSTALLED_AT_CUSTOMER" ng-show="contracts.currentTab==1">Installed At Customer</th>
                        <th st-sort="contracts.getters.START_DATE" ng-show="contracts.currentTab==1">Start Date</th>
                        <th st-sort="contracts.getters.END_DATE" ng-show="contracts.currentTab==1">End Date</th>
                        <th st-sort="CONTRACT_TYPE" ng-show="contracts.currentTab==1">Contract Type</th>
                        <th st-sort="contracts.getters.ESTIMATED_AMOUNT" ng-show="contracts.currentTab==1">Contract Amount</th>
                        <th st-sort="STATUS" ng-show="contracts.currentTab==1">Status</th>

                        <th st-sort="BILL_TO_CUSTOMER_NAME" ng-show="contracts.currentTab==2">Bill To Customer</th>
                        <th st-sort="BILL_TO_COUNTRY" ng-show="contracts.currentTab==2">Bill To Country</th>
                        <th st-sort="BILL_TO_CITY" ng-show="contracts.currentTab==2">Bill To City</th>
                        <th st-sort="BILL_TO_SITE_NAME" ng-show="contracts.currentTab==2">Bill To Site Name</th>
                        <th st-sort="SHIP_TO_COUNTRY" ng-show="contracts.currentTab==2">Ship To Country</th>
                        <th st-sort="SHIP_TO_CITY" ng-show="contracts.currentTab==2">Ship To City</th>
                        <th st-sort="CUSTOMER_CLASS" ng-show="contracts.currentTab==2">Customer Class</th>
                        <th st-sort="OPERATING_UNIT" ng-show="contracts.currentTab==2">Operating Unit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr st-select-mode="multiple" id="{{row.ID}}" ng-repeat="row in contracts.displayContractsCollection" ng-class="{'st-selected': row.isSelected, 'newRow': row.isNew, 'info': row.isLead}" context-menu="contracts.menuOptions">
                        <td cs-select="row">
                            <input type="checkbox" ng-click="contracts.selectRow(row)" ng-checked="row.isSelected" />
                        </td>
                        <td>{{row.CONTRACT_NUMBER}}</td>
                        <td ng-show="contracts.currentTab==1">{{row.SOLD_TO}}</td>
                        <td ng-show="contracts.currentTab==1">{{row.INSTALLED_AT_CUSTOMER}}</td>
                        <td ng-show="contracts.currentTab==1">{{contracts.getters.START_DATE(row) |date:"dd MMM yyyy"}}</td>
                        <td ng-show="contracts.currentTab==1">{{contracts.getters.END_DATE(row) |date:"dd MMM yyyy"}}</td>
                        <td ng-show="contracts.currentTab==1">{{row.CONTRACT_TYPE}}</td>
                        <td ng-show="contracts.currentTab==1">{{contracts.getters.ESTIMATED_AMOUNT(row) |number:2}} {{row.CURRENCY_CODE}}</td>
                        <td ng-show="contracts.currentTab==1">{{row.STATUS}}</td>

                        <td ng-show="contracts.currentTab==2">{{row.BILL_TO_CUSTOMER_NAME}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.BILL_TO_COUNTRY}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.BILL_TO_CITY}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.BILL_TO_SITE_NAME}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.SHIP_TO_COUNTRY}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.SHIP_TO_CITY}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.CUSTOMER_CLASS}}</td>
                        <td ng-show="contracts.currentTab==2">{{row.OPERATING_UNIT}}</td>
                    </tr>
                </tbody>
                <!--    Pagination  -->
                <tfoot>
                    <tr>
                        <td colspan="9" class="text-center">
                            <div st-items-by-page="contracts.itemsByPage" st-pagination="" st-template="templates/stPagination.html"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <footer>
        <div class="row">
            <div class="col-lg-6">
                <!--<button type="button" class="btn btn-back" ng-click="contracts.goBack()">
                    <i class="glyphicon glyphicon-chevron-left">
                    </i>
                    Back
                </button>-->
            </div>
            <div class="col-lg-6">
                <!--<a href="#createQuote">Next</a>-->
                <button type="button" class="btn btn-next" ng-click="contracts.goNext()" ng-disabled="!contracts.leadContract || !contracts.contractsCollection">
                    Next
                    <i class="glyphicon glyphicon-chevron-right">
                    </i>
                </button>
            </div>
        </div>
    </footer>
</div>          <!--@*end of controller*@-->
